<template>
	<div class="minepage">
		<div class="mine-bar">
			<div class="mine-item" :class="{actived:navItem.id==currentType}" v-for="navItem in navList" v-bind:key="navItem.id"
			 @click="typeClick(navItem)">{{navItem.billTypeName}}</div>
			<div class="mine-item searchinput">
				<input type="text" v-model="keyword" placeholder="输入关键字" />
			</div>
			<div class="mine-item search" @click="getBills"></div>
		</div>
		<div class="bill-list">
			<div class="bill-item" v-for="billItem in bills" v-bind:key="billItem.id">
				<div class="top">
					<div class="top-left">
						<div class="bill-title">{{billItem.billWord}}</div>
						<div class="bill-word">{{billItem.billAuthor}}</div>
					</div>
					<div class="top-right">
						
					</div>
				</div>

				<div class="bill-image" @click="goPic(billItem)">
					<img :src="billItem.billPic" />
				</div>
				<div class="time">
					<div class="bill-time">{{formatDate(billItem.billTime)}}</div>
				</div>
				<div class="box">
					
					<el-popconfirm
					  confirmButtonText='删除'
					  cancelButtonText='取消'
					  icon="el-icon-info"
					  iconColor="red"
					  title="你要删除这件作品？"
					  @onConfirm="shanchu(billItem)"
					>
					<i slot="reference" class="el-icon-delete-solid"></i>
					</el-popconfirm>
					
				</div>
			
				
				</div>

			</div>
		</div>
		
	</div>
</template>

<script>
	
	export default {
		name: 'Home',
		
		data() {
			return {
			
				dialogVisible: false,
				showSearch: false,
				keyword: '',
				currentType: 0,
				pageIndex: 0,
				pageSize: 10,
				navList: [],
				
				bills: []
				
			}
		},
		methods: {
			showSearchInput() {
				this.showSearch = !this.showSearch;
			},
			//分类点击
			typeClick(navItem) {
				this.currentType = navItem.id;
				this.pageIndex = 0;
				this.getBills();
			},
			goPic(billItem){
				this.$router.push("/detail?id="+billItem.id);
			},	
				//获取海报
			getBills() {
				const loading = this.$loading({
					lock: true,
					text: '咕咕咕...咕咕..',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				this.$http.get('/api/bill-infos/mine/' + this.currentType + '?pageIndex=' + this.pageIndex + '&pageSize=' +
					this.pageSize + '&keyword=' + this.keyword,{
					headers:{
						Authorization:'Bearer '+localStorage.getItem("token")
					}
				}).then((result) => {
					console.log("getBills result", result);
					if (result.status == 200) {
						this.bills = result.data.content;
					}
					loading.close();
				});
			},
			//海报分类
			getNavList() {
				this.$http.get("/api/bill-types/all/jpa").then((result) => {
					console.log("getNavList result", result);
					if (result.status == 200) {
						this.navList = result.data;
						var allItem = {
							id: 0,
							billTypeName: '全部',
							billTypeSort: 0
						};
						this.navList.unshift(allItem);
					}
				});
			},
			shanchu(billItem){
			console.log("进入删除",billItem)
			this.$http.delete("/api/bill-infos/delete/"+billItem.id,{
				headers:{
					Authorization:'Bearer '+localStorage.getItem("token")
				}
			}).then((result)=>{
						this.$message.info('正在删除...');
									console.log("getBills result",result);
									if(result.status==200){
										this.$message.success("删除成功");
										for(var i=0;i<this.bills.length;i++){
											if(this.bills[i].id==billItem.id){
												this.bills.splice(i,1);
												break;
											}
										}
									}else{
										this.$message.warning("删除失败");
									}
								}
					).catch((error)=>{
						this.$message.warning("删除失败");
					});
					}
				},
		
		mounted() {
			this.getNavList();
			this.getBills();
			this.loadShoucang();
		}
	}
</script>
<style>
	.minepage {
		width: 1080px;
		max-width: 1080px;
		margin: 0 auto;
	}

	.mine-bar {
		width: 100%;
		height: 44px;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}

	.mine-bar .mine-item {
		margin-right: 10px;
		padding: 5px;
	}

	.mine-bar .mine-item.actived {
		color: rgb(252, 146, 107);
		font-size: 105%;
		font-weight: 600;
		border-bottom: 2px solid rgb(252, 146, 107);
	}

	.bill-list {
		/* 定义弹性布局容器 */
		display: flex;
		/* 指定横向布局 row横向，column纵向*/
		flex-direction: row;
		/* 允许换行 */
		flex-wrap: wrap;
		/* 元素 */
		justify-content: start;
		align-items: flex-start;

	}

	/* 单个海报的布局定义 */
	.bill-item {
		width: 500px;
		height: 350px;;
		margin: 10px auto;
		border: 1px solid rgba(200, 200, 200, 0.5);
		background: #fff;
		display: flex;
		flex-direction: column;
	}

	.top {
		width: 690rpx;
		display: flex;
		flex-direction: row;
	}

	.top-left {
		padding-left: 10px;
		
		flex: 1;
	}

	.top-right {
		padding-right: 10px;
		width: 150rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.bill-title {
		font-weight: 900;
		margin-top: 10px;
		margin-bottom: 5px;
		font-size: 110%;
		color: #404040;
		width: 300px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.bill-word {
		margin-top: 5px;
		margin-bottom: 5px;
		display: flex;
		flex-direction: row;
	}

	.bill-follow {
		border: 1px solid rgba(69, 69, 69, 0.2);
		border-radius: 5px;
		padding: 5px 10px;
		color: #404040;
	}

	.bill-image {
		width: 690rpx;
		height: calc(690rpx * 0.618);
		overflow: hidden;
	}
	.bill-image img{
		width:100%;
		height:auto;
	}

	.time {
		width: 690rpx;
		font-size: 100%;
		color: #808080;
	}

	.bill-time {
		padding-right: 10px;
		font-size: 100%;
		color: #808080;
		display: flex;
		justify-content: flex-end;
	}

	.mine-item.search {
		background: url("../assets/nav-search.svg") no-repeat;
		width: 16px;
		height: 16px;

	}

	.mine-item.searchinput input {
		width: 200px;
		border: none;
		background-color: transparent;
		border-bottom: 2px solid rgba(0, 0, 0, 0.5);
		padding: 5px 10px;
	}
	.box{
		margin-top:5px;
		margin-bottom: 5px;
		padding: 5px 10px;
		display:flex;
		justify-content: space-around;
		align-items: center;
	}
	.box i{
		font-size:130%;
	}
	
	
	
	
</style>
